<template>
  <div>
    <!-- <ul style="list-style: none;">
        <li v-for="(item,index) in data" :key="index" @click="goto()">
            <img :key="index" :src="item.icon" alt="">
            <p>{{ item.name }}</p>

        </li>
      </ul> -->
    <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @input="input"
    />

    <div v-for="(item, index) in data" :key="index" class="box1">
      <div class="img_b">
        <img :src="item.artists[0].img1v1Url" alt="" class="img1" />
      </div>
      <div >
        <div class="box_name">{{ item.name }}</div>
        <!-- <div>{{ item.alias }}</div> -->
        <div>{{  item.artists[0].name}}</div>
      </div>

      <!-- <div>{{ item.alias.name }}</div> -->
    </div>
    <!-- <router-view></router-view> -->
  </div>
</template>
  
  <script>
import axios from "axios";
//  import {search_request} from "../api/search"
export default {
  data() {
    return {
      data: [],
      value: "",
      keyword: "",
    };
  },
  mounted() {
    // axios
    //   .get('https://autumnfish.cn/search?keywords='+ this.keyword)
    //   .then((res) => {
    //     console.log(res);
    //     this.data = res.data;
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
    this.input();
  },
  created() {},
  methods: {
    async goto() {
      //   console.log(this.$router);
      //   this.$router.push("/listgit");
      // let result = await search_request(this.keyword);
      //  console.log(result);
    },

    input(value) {
      console.log(value);
      this.keyword = value;
      console.log(this.keyword);
      axios
        .get("https://autumnfish.cn/search?keywords=" + this.keyword)
        .then((res) => {
          // console.log(res);
          this.data = res.data.result.songs;
          console.log(this.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
  
  <style lang="css" scoped>
ul {
  display: flex;
  flex-wrap: wrap;
}
ul p {
  display: flex;
  justify-content: center;
}
.box1 {
  display: flex;
  margin-top: 10px;
}
.img1 {
  width: 100px;
  height: 100px;
}
.img_b {
  margin: 0 10px;
}
.box_name{
margin-bottom: 55px;
  
}
</style>